<ion-header>
  <ion-navbar>
    <ion-icon name="arrow-back" (click)="back()"></ion-icon>
    <ion-title>搜索</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <form>
    <ion-item>
      <ion-input type="text" placeholder="请输入商家或美食名称" (keyup)="checkInput()" [(ngModel)]="searchValue" name="search"></ion-input>
    </ion-item>
    <div class="button_submit">
      <button type="submit" ion-button block (click)="searchRestaurants()">提交</button>
    </div>
  </form>
  <section *ngIf="restaurantList.length">
    <h4 class="title_restaurant">商家</h4>
    <shop-list [shopList]="restaurantList" [type]="'search'"></shop-list>
  </section>
  <section class="search_history" *ngIf="searchHistory.length&&showHistory">
    <h4 class="title_restaurant">搜索历史</h4>
    <ul>
      <li *ngFor="let item of searchHistory; index as index" class="history_list">
        <span class="history_text ellipsis" (click)="searchRestaurants(item)">{{item}}</span>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="delete_icon" (click)="deleteHistory(index)">
          <line x1="8" y1="8" x2="18" y2="18" style="stroke:#999;stroke-width:3" />
          <line x1="18" y1="8" x2="8" y2="18" style="stroke:#999;stroke-width:3" />
        </svg>
      </li>
    </ul>
    <footer class="clear_history" (click)="clearAll()">清空搜索历史</footer>
  </section>
  <div class="search_none" *ngIf="emptyResult">很抱歉！无搜索结果</div>
</ion-content>